<!--
 * @ModuleName: 
 * @Author: zhuzhaofeng
 * @Date: 2020-05-08 22:42:48
 -->
<template>
  <el-dialog
    title="请编辑学生信息"
    :visible.sync="visible"
    width="480px"
    :before-close="handlerBeforeClose"
    @open="handlerDialogOpen"
    @close="handlerDialogClose"
    :destroy-on-close="true"
  >
    <el-form
      :model="studentForm"
      :rules="studentRules"
      ref="studentForm"
      label-width="100px"
      size="small"
    >
      <el-form-item label="班级" prop="gradeName">
        <el-input readonly v-model.trim="studentForm.gradeName"></el-input>
      </el-form-item>
      <el-form-item label="学号" prop="number">
        <el-input maxlength="6" v-model.number="studentForm.number"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="username">
        <el-input v-model.trim="studentForm.username"></el-input>
      </el-form-item>
      <el-form-item label="班主任" prop="headmaster">
        <el-input v-model.trim="studentForm.headmaster"></el-input>
      </el-form-item>
      <el-form-item label="监护人" prop="guardian">
        <el-input v-model.trim="studentForm.guardian"></el-input>
      </el-form-item>
      <el-form-item label="监护人电话" prop="guardianPhone">
        <el-input v-model.trim="studentForm.guardianPhone"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="desc">
        <el-input resize="none" rows="4" type="textarea" v-model.trim="studentForm.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('studentForm')">立即创建</el-button>
        <el-button @click="resetForm('studentForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { Form, FormItem, Input, Dialog } from "element-ui";
import { uuid } from "@/utils";
import { studentAdd, studentModify } from "@/apis/students";
export default {
  name: "StudentInputDialog",
  components: {
    "el-form": Form,
    "el-form-item": FormItem,
    "el-input": Input,
    "el-dialog": Dialog
  },
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    student: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      studentForm: {
        id: "",
        gradeId: "",
        gradeName: "",
        number: "",
        username: "",
        guardian: "",
        guardianPhone: "",
        headmaster: "",
        desc: ""
      },
      studentRules: {
        number: [
          { required: true, message: "请输入学号" },
          { type: "number", message: "学号必须为数字类型" }
        ],
        username: [{ required: true, message: "请输入学生姓名" }],
        guardian: [{ required: true, message: "请输入监护人" }],
        guardianPhone: [{ required: true, message: "请输入监护人联系方式" }],
        headmaster: [{ required: true, message: "请输入班主任" }]
      }
    };
  },
  methods: {
    /**
     * @author zhuzhaofeng
     * @description: 窗口打开处理函数
     */
    handlerDialogClose() {
      this.$emit("close");
    },
    /**
     * @author zhuzhaofeng
     * @description: 窗口打开处理函数 此做法可以一个模态窗完成增改操作
     */
    handlerDialogOpen() {
      if (this.student.id) {
        // 如果存在id 直接合并数据
        this.studentForm = Object.assign({}, this.studentForm, this.student);
      } else {
        // 如果不存在id 只合并 年级名称 年级id  其他字段置空
        for (const key in this.studentForm) {
          if (key === "gradeId" || key === "gradeName") {
            this.$set(this.studentForm, key, this.student[key]);
          } else {
            this.$set(this.studentForm, key, "");
          }
        }
        // this.$refs.studentForm &&
        // 防止第一次打开没有$refs中没有 studentForm报错
        this.$refs.studentForm && this.$refs.studentForm.clearValidate();
      }
    },
    /**
     * @author zhuzhaofeng
     * @description: 窗口关闭处理函数
     */
    handlerBeforeClose(done) {
      this.$emit("update:visible", false);
    },
    /**
     * @author zhuzhaofeng
     * @description: 提交表单处理函数
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.studentForm.id) {
            // 存在id  修改
            studentModify(this.studentForm).then(res => console.log(res));
          } else {
            // 不存在id 创建id 并新增
            this.studentForm.id = uuid();
            studentAdd(this.studentForm).then(res => console.log(res));
          }
        }
      });
    },
    /**
     * @author zhuzhaofeng
     * @description: 重置表单处理函数
     */
    resetForm(formName) {
      this.$data = this.$options.data();
      this.$refs[formName].resetFields();
    }
  }
};
</script>